<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var widths=document.documentElement.clientWidth;
				document.documentElement.style.fontSize=widths/750*100+"px";
				window.onresize=function(){
		 			document.location.reload()  
			}
		</script>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			body {
				 width: 100%;
    			height:100% ;
				background: url(img/psb.jpg) no-repeat;
				background-size:7.5rem 11.8rem;
			}
			.s-tou{
			    width: 100%;
			    height: 1.2rem;
			    background: #DB7093;
			    display: flex;
			    justify-content: center;
			    align-items:center;
			    font-size: 0.4rem;
			} 
			.box{
				width:100%;
				height:9rem;
				/*border:1px solid red;*/
				box-sizing: border-box;
				padding-top:0.2rem;
				padding-left:0.4rem;
				margin: 0 auto;
				font-size: 0.4rem;
				color:red;
			}
			input{
				width:4rem;
				height: 0.5rem;
				font-size: 0.3rem;
			}
			button{
				width: 1rem;
				height: 0.5rem;
				font-size: 0.3rem;
			}
			#jeshu{
				width: 1rem;
				height: 0.5rem;
				font-size: 0.3rem;
				color:palevioletred;
				background: white;
				text-decoration: none;
				text-align: center;
				line-height: 0.5rem;
			}
		</style>
	</head>
	<body ng-app="myapp" ng-controller="tjsj">
		<div class="s-tou">
		   <p>【浅殇】账单</p>
		</div>
		<div class="box">
			 物品： <input type="text" placeholder="请输入所需物品" id="bt" ng-model="wp"/><br /><br />
		   	价格： <input type="text" placeholder="请输入所需价格" id="ll" ng-model="title"/><br /><br />
		    数量： <input type="text" placeholder="请输入所需数量" id="bt1" ng-model="content"/><br /><br />
		    <button class="btn" ng-click="add()">搜索</button><br /><br />
		    
		    <table border="1" cellspacing="0" id="tab" >
		    	<tr align="center">
		    		<td>物品</td>
		    		<td>价格</td>
		    		<td>数量</td>
		    		<td colspan="2">操作</td>
		    	</tr>
		    	<tr ng-repeat="i in val">
		    		<td>{{i.wp}}</td>
		    		<td>{{i.title}}</td>
		    		<td>{{i.content}}</td>
		    		<td><button class="sc" ng-click="sc($index)">删除</button></td>
		    		<td><button class="xg" ng-click="xg($index)">修改</button></td>
		    	</tr>
		    </table>
		</div>
		<a href="sy1.html" id="jeshu" style="font-family：华文彩云;">退出</a>
	<script type="text/javascript">
		var mk=angular.module("myapp",[])
			mk.service("crsj",function(){
				this.cr=function(dataObj){
					if(dataObj){
						dataStr=JSON.stringify(dataObj);
						localStorage.setItem("ly",dataStr)
					}else{
						localStorage.setItem('ly','{"info":[]}')
					}
				}
				this.qu=function(){
					dataStr=localStorage.getItem('ly');
					if(dataStr){
						dataObj=JSON.parse(dataStr);
						return dataObj;
					}
				}
			})
			mk.controller("tjsj",['$scope','crsj',function($scope,crsj){
				if(crsj.qu()){
					$scope.val=crsj.qu().info
				}else{
					crsj.cr();
				}
				$scope.add=function(){
					dataObj=crsj.qu();
					dataObj.info.push({"wp":$scope.wp,"title":$scope.title,"content":$scope.content});
					$scope.val=dataObj.info;
					crsj.cr(dataObj);
//					$scope.color();
				}
				$scope.sc=function(index){
					dataObj=crsj.qu();
					dataObj.info.splice(index,1);
					$scope.val=dataObj.info;
					crsj.cr();
				}
				$scope.xg=function(index){
					arr=crsj.qu().info;
					console.log(arr[index])
					arr[index]={"wp":$scope.wp,"title":$scope.title,"content":$scope.content}
					$scope.val=dataObj.info;
					crsj.cr();
				}
			}])

		</script>
	</body>
</html>
